<template>
  <div class="page">
    <h3>通知公告</h3>
    <div class="tableData">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="title" label="标题" align="center" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="createTime" label="日期" align="center" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="author" label="作者" align="center" show-overflow-tooltip> </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="btn">
      <el-button type="primary" @click="back">返回</el-button>
    </div>
    <el-drawer title="详情" :visible.sync="drawer" :direction="direction" :before-close="handleClose" size="45%">
      <h4>{{ showmessage.title }}</h4>
      <div class="author">
        <span>{{ showmessage.createTime }}</span>
        <span>{{ showmessage.author }}</span>
      </div>
      <p v-html="details.content"></p>
      <div class="img" v-show="showmessage.picture">
        <img :src="showmessage.picture" alt="" style="width: 100%; height: 100%" />
      </div>
    </el-drawer>
    <el-pagination class="pageno" background layout="prev, pager, next" :total="total * 10" @current-change="change">
    </el-pagination>
  </div>
</template>

<script>
import * as admin from '@/api/admin'
import Seats from '@/api/Seats'
export default {
  data() {
    return {
      total: 0,
      tableData: [],
      current: 1,
      limit: 9,
      title: '',
      drawer: false,
      direction: 'rtl',
      showmessage: {},
      details: {},
    }
  },
  methods: {
    back() {
      this.$parent.Tip()
    },
    getnotice() {
      admin.getnotice(this.current, this.limit, this.title, 1).then(res => {
        this.tableData = res.data.noticeList
        this.total = res.data.pages
      })
    },
    async handleClick(scope) {
      await Seats.getNoticeMessage(scope.id).then(res => {
        this.showmessage = res.data
        this.details = this.showmessage
      })
      this.drawer = true
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    change(val) {
      this.current = val
      this.getnotice()
    },
  },
  created() {
    this.getnotice()
  },
}
</script>

<style lang="scss" scoped>
.page {
  width: 84vw;
  height: 85vh;
  background-color: #fff;
  margin-left: 20px;
  border-radius: 25px;
  box-sizing: border-box;
  h3 {
    font-weight: 400;
    margin-left: 54px;
  }
  .tableData {
    width: 70%;
    height: 70.6%;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin: 0 auto;
    .el-table {
      border-radius: 10px;
    }
  }
  .btn {
    width: 70px;
    height: 41px;
    margin: auto;
    margin-right: 72px;
    margin-top: 10px;
  }
  .el-drawer__body {
    h4 {
      font-weight: 400;
      width: 324px;
      margin: 0 auto;
      text-align: center;
    }
    .author {
      margin-top: 10px;
      display: flex;
      justify-content: space-evenly;
    }
    p {
      width: 86%;
      margin: 0 auto;
      margin-top: 27px;
      text-align: center;
    }
    .img {
      width: 180px;
      height: 180px;
      margin: 0 auto;
      margin-top: 50px;
    }
  }
  .pageno {
    text-align: center;
  }
}
</style>
